<template>
  <div>
    <Modal
      v-model="modal1"
      title="添加"
      @on-ok="ok"
      @on-cancel="cancel"
      width="800px"          >
      <Row class="">
        <Col span="10" offset="1" style="margin: 10px 20px">
          <span>名称：</span>
          <Input style="width: 80%;" v-model="name" />
        </Col>
        <Col span="10" offset="1" style="margin: 10px 20px">
          <span>编码：</span>
          <Input style="width: 80%;" v-model="code" />
        </Col>
        <div v-if="this.editType!==0">
        <Col span="10" offset="1" style="margin: 10px 20px" v-if="this.zhanghao">
          <span>账号：</span>
          <Input style="width: 80%;" v-model="zhanghao" />
        </Col>
      </div>
        <div v-if="this.editType===0">
          <Col span="10" offset="1" style="margin: 10px 20px" v-if="this.currentData.type ===2">
            <span>账号：</span>
            <Input style="width: 80%;" v-model="zhanghao" />
          </Col>
        </div>

      </Row>
    </Modal>
    <Row class="bench_search">
      <Col span="6" offset="1">
        <span>社区名称：</span>
        <Input style="width: 70%;" v-model="shequname" />
      </Col>
      <Col span="6">
        <span>社区编码：</span>
        <Input style="width: 70%;" v-model="shequcode" />
      </Col>
      <Button class="new-btn-sty" @click="searchData"><Icon type="ios-search" /> 搜索</Button>
    </Row>
    <Tree :data="data5" :render="renderContent" class="demo-tree-render"></Tree>
  </div>
</template>

<script>
import { displayierarchyList, selectshequList, updatejiedaoqu, deletequjiedao, creatqujie } from '@/api/activity'
export default {
  name: 'shequ-jiedao-list',
  data () {
    return {
      companyType: {}, // 插入二级标识
      zhanghao: '', // 弹框输入框绑定的值
      name: '', // 弹框输入框绑定的值
      code: '', // 弹框输入框绑定的值
      shujuaa: [],
      shuju: [],
      arr: [],
      shequcode: '',
      shequname: '',
      modal1: false, /// 是否显示弹框
      currentData: {}, // 当前点击的树节数据
      editType: 0, // 点击树节点后面的按钮  0:增加节点  1:更新节点名
      data5: [{
        title: '根节点',
        expand: true,
        render: (h, {
          root,
          node,
          data
        }) => {
          return h('span', {
            style: {
              display: 'inline-block',
              width: '100%'
            }
          }, [
            h('span', [
              h('Icon', {
                props: {
                  type: 'ios-folder-outline'
                },
                style: {
                  marginRight: '8px'
                }
              }),
              h('span', data.title)
            ]),
            h('span', {
              style: {
                display: 'inline-block',
                float: 'right',
                marginRight: '-300px'
              }
            }, [
              h('Button', {
                props: Object.assign({}, this.buttonProps, {
                  icon: 'ios-add',
                  type: 'primary'
                }),
                style: {
                  width: '64px'
                },
                on: {
                  click: () => {
                    this.append(data)
                  }
                }
              })
            ])
          ])
        },
        children: []
      }],
      buttonProps: {
        type: 'default',
        size: 'small'
      }
    }
  },
  methods: {
    // 定义点击事件
    renderContent (h, {
      root,
      node,
      data
    }) {
      return h('span', {
        style: {
          display: 'inline-block',
          width: '100%'
        }
      }, [
        h('span', [
          h('Icon', {
            props: {
              type: 'ios-paper-outline'
            },
            style: {
              marginRight: '8px'
            }
          }),
          h('span', data.title)
        ]),
        h('span', {
          style: {
            display: 'inline-block',
            float: 'right',
            marginRight: '-160px'
          }
        }, [
          h('Button', {
            props: Object.assign({}, this.buttonProps, {
              icon: 'ios-add'
            }),
            style: {
              marginRight: '8px'
            },
            on: {
              click: () => {
                this.append(data, node)
              }
            }
          }),
          h('Button', {
            props: Object.assign({}, this.buttonProps, {
              icon: 'md-create'
            }),
            style: {
              marginRight: '8px'
            },
            on: {
              click: () => {
                this.update(data)
              }
            }
          }),
          h('Button', {
            props: Object.assign({}, this.buttonProps, {
              icon: 'ios-remove'
            }),
            on: {
              click: () => {
                this.remove(root, node, data)
              }
            }
          })
        ])
      ])
    },
    // 添加节点
    append (data, node) {
      this.name = '' // 清空弹框的输入框默认值
      this.code = ''// 清空弹框的输入框默认值
      this.zhanghao = ''// 清空弹框的输入框默认值
      console.log(data, '插入数据')
      this.modal1 = true
      this.editType = 0
      this.companyType = node
      this.currentData = data
    },
    // 更新名称
    update (data) {
      this.name = '' // 清空弹框的输入框默认值
      this.code = ''// 清空弹框的输入框默认值
      this.zhanghao = ''// 清空弹框的输入框默认值
      console.log(data, '修改数据')
      this.modal1 = true
      if (data.type === 1) {
        this.name = data.qu
        this.code = data.qu_code
        console.log(data, '区域')
      } else if (data.type === 2) {
        this.name = data.jiedao
        this.code = data.jiedao_code
        console.log(data, '街道')
      } else {
        this.name = data.shequ
        this.code = data.shequ_code
        this.zhanghao = data.company_code
        console.log(data, '社区')
      }
      this.editType = 1
      this.currentData = data
    },
    // 删除节点
    remove (root, node, data) {
      let chanshu = {}
      if (data.type === 1) {
        chanshu = { qu_code: data.qu_code }
      } else if (data.type === 2) {
        chanshu = { jiedao_code: data.jiedao_code }
      } else {
        chanshu = { id: data.id }
      }
      if (confirm('确定要删除吗') === true) {
        deletequjiedao(chanshu).then(ret => {
          if (ret.data.errmsg === 'success') {
            this.$Message.success('删除成功')
            const parentKey = root.find(el => el === node).parent
            const parent = root.find(el => el.nodeKey === parentKey).node
            const index = parent.children.indexOf(data)
            parent.children.splice(index, 1)
          /* this.selectfirest() */
          }
        })
      }
    },

    // 弹框点击确定
    ok () {
    /*  debugger */
      if (this.editType === 0) {
        let data = {}
        if (this.currentData.title === '根节点') {
          data = { qu: this.name, qu_code: this.code, id: this.currentData.id }
        } else if (this.currentData.type === 1) {
          data = { jiedao: this.name, jiedao_code: this.code, id: this.currentData.id }
        } else if (this.currentData.type === 2) {
          data = { shequ: this.name, shequ_code: this.code, company_code: this.zhanghao, id: this.currentData.id }
        }
        console.log(data, '阐述')
        creatqujie(data).then(ret => {
          if (ret.data.errmsg === 'success') {
            this.$Message.success('添加成功')
            /*   const children = this.currentData.children || []
            children.push({
              title: this.name + '-----' + this.code,
              expand: true
            })
            this.$set(this.currentData, 'children', children) */
            this.selectfirest()
          }
        })
      } else {
        /* this.$set(this.currentData, 'title', this.name) */
        console.log(this.currentData.id, '78978789')
        let data = {}
        if (this.currentData.type === 1) {
          data = { id: this.currentData.id, qu: this.name, qu_code: this.code }
        } else if (this.currentData.type === 2) {
          data = { id: this.currentData.id, jiedao: this.name, jiedao_code: this.code }
        } else {
          data = { id: this.currentData.id, shequ: this.name, shequ_code: this.code, company_code: this.zhanghao }
        }
        updatejiedaoqu(data).then(res => {
          if (res.data.errmsg === 'success') {
            this.$Message.success('修改成功')
            /* this.$set(this.currentData, 'title', this.name) */
            this.selectfirest()
          }
        })
      }
      /* this.name = '' // 清空弹框的输入框默认值
      this.code = ''// 清空弹框的输入框默认值
      this.zhanghao = ''// 清空弹框的输入框默认值 */
    },
    // 弹框关闭
    cancel () {
      this.name = '' // 清空弹框的输入框默认值
      this.code = '' // 清空弹框的输入框默认值
      this.zhanghao = ''// 清空弹框的输入框默认值
    },
    searchData () {
      let a = { shequ: this.shequname, shequ_code: this.shequcode }
      this.mohuselect(a)
    },
    selectfirest () {
      let data = {}
      displayierarchyList(data).then(ret => {
        this.arr = ret.data.data
        this.assembly()
      })
    },
    mohuselect (a) {
      selectshequList(a).then(ret => {
        this.arr = ret.data.data
        this.assembly()
      })
    },
    assembly () {
      var map = {}
      var dest = []
      for (var i = 0; i < this.arr.length; i++) {
        var ai = this.arr[i]
        if (!map[ai.qu_code]) {
          dest.push({
            type: 1,
            id: ai.id,
            qu: ai.qu,
            qu_code: ai.qu_code,
            title: ai.qu + '-----区域编码：' + ai.qu_code,
            children: []
          })
          map[ai.qu_code] = ai
        }
      }
      var map2 = {}
      var dest2 = []
      for (let i = 0; i < this.arr.length; i++) {
        let ai = this.arr[i]
        if (ai.jiedao !== undefined) {
          if (!map2[ai.jiedao_code]) {
            dest2.push({
              qu: ai.qu,
              type: 2,
              id: ai.id,
              jiedao: ai.jiedao,
              jiedao_code: ai.jiedao_code,
              title: ai.jiedao + '-----街道编码：' + ai.jiedao_code,
              qu_code: ai.qu_code,
              children: [{ title: ai.shequ + '-----社区编码：' + ai.shequ_code + '-----社区账号：' + ai.company_code, qu: ai.qu, qu_code: ai.qu_code, jiedao: ai.jiedao, jiedao_code: ai.jiedao_code, shequ_code: ai.shequ_code, shequ: ai.shequ, company_code: ai.company_code, id: ai.id }]
            })
            map2[ai.jiedao_code] = ai
          } else {
            for (var j = 0; j < dest2.length; j++) {
              var dj = dest2[j]
              if (dj.jiedao_code === ai.jiedao_code) {
                dj.children.push({ title: ai.shequ + '-----社区编码：' + ai.shequ_code + '-----社区账号：' + ai.company_code, qu: ai.qu, qu_code: ai.qu_code, jiedao: ai.jiedao, jiedao_code: ai.jiedao_code, shequ_code: ai.shequ_code, shequ: ai.shequ, company_code: ai.company_code, id: ai.id })
                break
              }
            }
          }
        }
      }
      console.log(dest)
      console.log(dest2)
      for (let i = 0; i < dest.length; i++) {
        for (let j = 0; j < dest2.length; j++) {
          if (dest[i].qu_code === dest2[j].qu_code) {
            dest[i].children.push(dest2[j])
          }
        }
      }
      console.log(dest)
      this.shujuaa = dest
      this.data5[0].children = this.shujuaa
      console.log(this.data5[0].children, 'this.arr')
    }
  },
  mounted () {
    /* this.mohuselect() */
  },
  created () {
    this.selectfirest()
  }

}
</script>

<style scoped>
  .demo-tree-render .ivu-tree-title{
    width: 100%;
  }
</style>
